@import url(./pages/Login/Login.module.css);

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.m_scroll::-webkit-scrollbar {
  background-color: transparent;
  width: 2px;
}
.m_scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: gray;
  width: 3px;
}
.m_scroll::-webkit-scrollbar-track {
  background: transparent;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

input {
  @apply ring-0 !important;
  outline: none;
  border: 0;
}

.bg-opa-10 {
  --bg-opa: var(--opa-10) !important;
}
.bg-opa-60 {
  --bg-opa: var(--opa-60) !important;
}
.bg-opa-80 {
  --bg-opa: var(--opa-80) !important;
}
.bg-opa-90 {
  --bg-opa: var(--opa-90) !important;
}

:root {
  --opa-10: 0.1;
  --opa-30: 0.3;
  --opa-50: 0.6;
  --opa-80: 0.8;
  --opa-90: 0.9;
  --opa-100: 1;
  --text-sidebar: #eee;

  --boy: #759fd1;
  --girl: #ef87a4;

  --bg: rgb(241, 242, 243); /* 主背景色 */
  --bg-chat: rgb(255, 255, 255); /* 聊天框背景 */
  --bg-sidebar: hsl(225, 22%, 28%); /* 侧边背景 */
  --bg-input: rgb(214, 215, 217); /* 输入框背景 */
  --bg-select: rgb(224, 226, 228); /* 列表项选中高亮背景 */
  --bg-float: rgb(255, 255, 255); /* 浮层背景色 */

  --primary: rgb(0, 136, 254); /* 主题色 */
  --normal-icon: rgb(116, 117, 119); /* icon 颜色*/
  --border-color: rgb(239, 240, 241);

  --font-light2: rgb(199, 200, 201); /* lighe level 2*/
  --font-light: rgb(162, 163, 165); /* 深色字体 */
  --font-normal: rgb(23, 26, 29); /* 正常字体 */
  --font-input: rgb(159, 177, 251); /* 输入框字体颜色 */

  --bg-light: #383838;
  --bg-loading: rgba(75, 75, 75, 0.5);

  --opa-bg: rgb(241, 242, 243, var(--opa-90));
}

.dark {
  --bg: rgb(21, 21, 24); /* 主背景色 */
  --bg-chat: rgb(47, 48, 53); /* 聊天框背景 */
  --bg-sidebar: rgb(39, 43, 50); /* 侧边背景 */
  --bg-input: rgb(75, 83, 94); /* 输入框背景 */
  --bg-select: rgb(55, 57, 61); /* 列表项选中高亮背景 */
  --bg-float: rgb(86, 90, 92); /* 浮层背景色 */

  --primary: rgb(0, 136, 254); /* 主题色 */
  --normal-icon: rgb(176, 179, 182); /* icon 颜色*/
  --border-color: rgb(44, 45, 49);

  --font-light2: rgb(156, 159, 163); /* lighe level 2*/
  --font-light: rgb(115, 116, 120); /* 深色字体 */
  --font-normal: rgb(238, 242, 248); /* 正常字体 */
  --font-input: rgb(75, 83, 94); /* 输入框字体颜色 */

  --bg-light: #383838;
  --bg-loading: rgba(75, 75, 75, 0.5);

  --opa-bg: rgb(21, 21, 24, var(--opa-90));
}
@keyframes resetBg {
  to {
    color: var(--font-normal);
    background: var(--bg-light);
  }
}
input {
  animation: resetBg 0.1s forwards;
}
input {
  height: 0;
  padding: 1em 0.5em !important;
  caret-color: #fff;
  background-clip: content-box !important;
}

input::first-line {
  color: var(--font-normal);
}

/* body {
  background: url("../public/bg.jpg") no-repeat;
  background-size: cover  ;
}
.dark body {
  background: url("../public/bg_dark.jpg") no-repeat;
  background-size: cover;
} */

.MyPanel {
  width: 400px !important;
}
@media (max-width: 640px) {
  .MyPanel {
    width: 100% !important;
  }
}

/* 摸一摸动画 */
@keyframes head_bounce {
  0% {
    transform: rotateZ(-0);
  }
  30% {
    transform: rotateZ(-6deg);
  }
  80% {
    transform: rotateZ(6deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
.head_bounce {
  transform-origin: bottom;
  animation: head_bounce 0.2s ease 0s 3;
}

.dot2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/** antd 颜色全局覆盖 */
.ant-select-selection-item {
  color: var(--font-normal) !important;
}
.ant-radio,
.ant-radio-wrapper,
.ant-modal-confirm-title,
.ant-btn {
  color: var(--font-normal) !important;
}
.ant-btn {
  background: var(--bg) !important;
}
.ant-input::placeholder {
  color: var(--bg-input) !important;
}
.ant-menu,
.ant-dropdown-menu {
  background: var(--bg-float) !important;
  color: var(--font-normal) !important;
}
.ant-dropdown-menu * {
  color: inherit !important;
}
.ant-dropdown-menu-item-active {
  background: var(--bg) !important;
}
.ant-menu-item.ant-menu-item-selected {
  background: var(--bg) !important;
  color: var(--font-normal) !important;
}
.ant-popover-inner-content {
  background: var(--bg-float) !important;
  color: var(--font-normal) !important;
}

.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
  background: var(--bg) !important;
}
